<template>
	<view class="container">
		<view :style="{marginTop:(+systemInfo.statusBarHeight + +systemInfo. titleBarHeight)+'px'}" v-if="isLoading">
			<u-skeleton rows="3" title loading></u-skeleton>
		</view>
		<view class="detail_container" v-else>
			<view class="swiper_top_box">
				<swiper class="swiper" circular :autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval"
					:duration="swiperConfig.duration" @change="changeSwiper">
					<swiper-item v-for="(item,index) in goodsDetailData.sliderImage" :key="index" class="swiper_item">
						<image :src="item" class="slider_img">
						</image>
					</swiper-item>
				</swiper>
				<view class="indicator_dots">
					<text>{{current}}</text>
					<text>/</text>
					<text>{{goodsDetailData.sliderImage.length}}</text>
				</view>
			</view>
			<view class="zhima_credit_box">
				<image src="/static/image/zhima_credit.png" mode="aspectFit" lazy-load="true" class="zhima_credit_img">
				</image>
				<view class="zhima_credit_text">
					芝麻免押金·600分以上就有机会减免押金
				</view>
			</view>
			<view class="detail_card_box">
				<!-- 商品价格卡片 -->
				<view class="goods_price_box">
					<view class="goods_price_left">
						<view class="goods_price">
							<text class="price_symbol">￥</text>
							<text class="price_num">{{goodsDetailData.dailyRent}}</text>
							<text class="price_day">/起</text>
						</view>
					</view>
					<view class="goods_price_right">
						<view class="goods_logo_top">
							潮多多租机
						</view>
						<view class="goods_logo_tag">
							信用免押｜ 安心租
						</view>
					</view>
				</view>
				<!-- 商品标题卡片 -->
				<view class="goods_card goods_name_card">
					<view class="goods_title_box">
						<text class="color_commodity">
							{{goodsDetailData.colorOfCommodityName}}
						</text>
						<text class="goods_name">
							{{goodsDetailData.name}}-{{goodsDetailData.name}}-{{goodsDetailData.name}}
						</text>
					</view>
					<view class="service_tag_list">
						<view class="service_tag_item" v-for="(item,index) in goodsDetailData.serviceTagName"
							:key="index">
							<image src="../../static/image/service_icon.png" mode="aspectFit" lazy-load="true"
								class="service_tag_item_img"></image>
							<view class="service_tag_item_name">
								{{item}}
							</view>
						</view>
					</view>
					<view class="goods_opertion_box">
						<button class="goods_opertion_item share_btn" open-type="share" hover-class="none">
							<u-icon name="share-square" size="38"></u-icon>
							<view class="goods_opertion_item_title">
								分享
							</view>
						</button>
						<view class="goods_opertion_item" @click="toShouCang">
							<u-icon name="star" size="38"></u-icon>
							<view class="goods_opertion_item_title">
								收藏
							</view>
						</view>
						<view class="goods_opertion_item" @click="toInform">
							<u-icon name="bell" size="38"></u-icon>
							<view class="goods_opertion_item_title">
								通知
							</view>
						</view>
					</view>
				</view>
				<!-- 商品选择卡片 -->
				<view class="goods_card product_option_card">
					<view class="product_option_item" @click="handleSkuPanel">
						<view class="product_option_title">
							选择
						</view>
						<view class="product_option_content">
							{{selectedMode.join(';')}}
						</view>
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
					<view class="product_option_item" @click="checkParameter">
						<view class="product_option_title">
							参数
						</view>
						<view class="product_option_content">
							{{specificationParameter.join(';')}}
						</view>
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
					<view class="product_option_item">
						<view class="product_option_title">
							发货
						</view>
						<view class="product_option_content">
							{{goodsDetailData.shipAddress}}
						</view>
					</view>
				</view>
				<!-- 商户卡片 -->
				<view class="goods_card mer_info_card">
					<view class="mer_top_box">
						<view class="mer_logo_box">
							<image :src="goodsDetailData.mer_logo" mode="widthFix" width="72rpx" height="72rpx"
								radius="20rpx">
							</image>
						</view>
						<view class="mer_title_box">
							<view class="mer_name">
								{{goodsDetailData.merName}}
							</view>
							<view class="company_name">
								聚雄（上海）网络科技有限公司
							</view>
						</view>
						<view class="mer_btn_container" @click="toShop">
							<view class="mer_btn_box">
								<text class="iconfont icon-shanghu mer_logo" style="color: #fff;"></text>
								<text>进店逛逛</text>
							</view>
						</view>
					</view>
					<view class="mer_tag_box">
						<view class="mer_tag_item" v-for="(item,index) in mer_list" :key="index">
							<text class="iconfont icon-duihao mer_tag_logo"></text>
							<text>{{item}}</text>
						</view>
					</view>
				</view>
				<!-- 商品推荐 -->
				<view class="goods_card goods_recommend_box">
					<view class="goods_recommend_title">
						商品推荐
					</view>
				</view>
				<!-- 租赁流程 -->
				<view class="goods_card rental_procedure_card">
					<view class="rental_procedure_top_box">
						<view class="rental_procedure_item" :class="item.selected?'active':''"
							v-for="(item,index) in rental_procedure_list" @click="toggleRentalProcedure(item,index)">
							<view class="rental_item_icon">
								<view class="iconfont" :class="item.selected?item.pick_icon:item.icon "></view>
							</view>
							<view class="rental_item_text">
								{{item.text}}
							</view>
						</view>
					</view>
					<template v-for="(item,index) in rental_procedure_list">
						<view class="rental_content" v-if="item.selected">
							<!-- 租赁流程 -->
							<view class="rental_content_item" v-if="index === 0">
								<view class="procedure_list_box" v-for="item1 in procedure_list">
									<view class="procedure_list_ind">
										{{item1.ind}}
									</view>
									<view class="procedure_list_text">
										{{item1.text}}
									</view>
								</view>
							</view>
							<!-- 租赁计算 -->
							<view class="lease_calculation_content" v-if="index === 1">
								<view class="lease_calculation_content_top">
									<view class="lease_calculation_list_box" v-for="item1 in lease_calculation_list">
										<view class="lease_calculation_days">
											<view class="lease_calculation_days_item" v-for="item2 in item1.days_arr">
												{{item2}}
											</view>
										</view>
										<view class="lease_calculation_text">
											{{item1.text}}
										</view>
									</view>
								</view>
								<view class="lease_calculation_list_example">
									例：实际租期为6-9号（来回物流不算租期）
								</view>
							</view>
							<!-- 租后方案 -->
							<view class="post_lease_scheme_content" v-if="index === 2">
								<view class="post_lease_scheme_list_box" v-for="item1 in post_lease_scheme_list">
									<view class="post_lease_scheme_list_title">
										{{item1.title}}
									</view>
									<view class="post_lease_scheme_list_text">
										{{item1.text}}
									</view>
								</view>
							</view>
							<!-- 品牌保障 -->
							<view class="brand_guarantee_content" v-if="index === 3">
								<view class="brand_guarantee_list_box" v-for="item1 in brand_guarantee_list">
									<view class="brand_guarantee_list_icon iconfont" :class="item1.icon">
									</view>
									<view class="brand_guarantee_list_text">
										{{item1.text}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="detail_tab_card_box">
				<view class="detail_tab_list_box">
					<view class="detail_tab_list_item" v-for="(item,index) in detail_tab_list"
						:class="item.selected?'active':''" @click="toggleDetailTab(item,index)">
						<view class="detail_tab_list_item_text">
							{{item.name}}
						</view>
						<view class="detail_tab_list_item_line" v-if="item.selected"></view>
					</view>
				</view>
				<view class="detail_tab_content_box">
					<template v-for="(item,index) in detail_tab_list">
						<view class="detail_tab_content_item" v-if="item.selected && index === 0">
							<mp-html :content="goodsDetailData.productDetails" :tag-style="tagStyle" />
						</view>
					</template>
				</view>
			</view>
			<view class="bottom_box">
				<view class="bottom_left_box">
					<view class="bottom_left_item" @click="toHome">
						<view class="nav_icon iconfont icon-dianpu"></view>
						<view class="nav_text">
							首页
						</view>
					</view>
					<view class="bottom_left_item" @click="toKeFu">
						<view class="nav_icon iconfont icon-kefu"></view>
						<view class="nav_text">
							客服
						</view>
					</view>
					<view class="bottom_left_item" @click="toShouCang">
						<view class="nav_icon iconfont icon-shoucang"></view>
						<view class="nav_text">
							收藏
						</view>
					</view>
				</view>
				<view class="bottom_right_box">
					<view class="bottom_btn_box" @click="handleSkuPanel">
						<text>￥</text>
						<text>{{goodsDetailData.dailyRent}}</text>
						<text>/天</text>
						<text style="margin-left: 10rpx;">免押租</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 客服弹窗 -->
		<u-modal :show="keFuShow" :closeOnClickOverlay="true" :showConfirmButton="false" @close="modalClose">
			<view class="modal_container">
				<view class="close_icon" @click="modalClose">
					<u-icon name="close-circle" size="48" color="#fff"></u-icon>
				</view>
				<view class="keFu_content">
					<view class="keFu_item" @click="shangJiaPhone">
						<view class="keFu_item_icon_box">
							<view class="iconfont icon-kefurexianxianxing keFu_item_icon"></view>
						</view>
						<view class="keFu_item_title_box">
							<view class="keFu_item_title">
								商家客服
							</view>
							<view class="keFu_item_sub_title">
								拨打商家客服热线
							</view>
						</view>
						<view class="keFu_item_arrow_box">
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
					<!-- #ifdef MP-ALIPAY -->
					<view class="keFu_item">
						<contact-button tnt-inst-id="syI_uBab" scene="SCE00333423" color="#fff" size="48"
							class="contact_button"></contact-button>
						<view class="keFu_item_icon_box">
							<view class="iconfont icon-zaixiankefu keFu_item_icon"></view>
						</view>
						<view class="keFu_item_title_box">
							<view class="keFu_item_title">
								平台在线客服
							</view>
							<view class="keFu_item_sub_title">
								在线咨询平台客服
							</view>
						</view>
						<view class="keFu_item_arrow_box">
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
					<!-- #endif -->
					<view class="keFu_item" @click="pingTaiPhone">
						<view class="keFu_item_icon_box">
							<view class="iconfont icon-zaixiankefu1 keFu_item_icon"></view>
						</view>
						<view class="keFu_item_title_box">
							<view class="keFu_item_title">
								平台热线客服
							</view>
							<view class="keFu_item_sub_title">
								拨打平台客服热线
							</view>
						</view>
						<view class="keFu_item_arrow_box">
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
					<view class="keFu_service_box">
						服务时间：9:30-19:00
					</view>
				</view>
			</view>
		</u-modal>
		<!-- 产品参数弹窗、sku弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup_contanier">
				<view class="close_icon" @click="popupClose">
					<u-icon name="close" size="38"></u-icon>
				</view>
				<view class="parameter_content" v-if="parameterShow">
					<view class="parameter_title_box">
						产品参数
					</view>
					<view class="parameter_content_box">
						<view class="parameter_content_item"
							v-for="(item,index) in goodsDetailData.specificationParameter">
							<view class="parameter_content_item_title">
								{{item[0]}}
							</view>
							<view class="parameter_content_item_value">
								{{item[1]}}
							</view>
						</view>
					</view>
				</view>
				<view class="sku_panel_content" scroll-y v-if="skuPanelShow">
					<view class="procedure_label_box">
						租赁流程:选择规格&gt;信用免押&gt;补充资料&gt;人脸认证&gt;下单成功
					</view>
					<view class="goods_detail_box">
						<view class="goods_pic_box">
							<u--image :src="selectedLeaseItem.specImagesUrl" width="190rpx" mode="widthFix">
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</view>
						<view class="goods_des_box">
							<view class="goods_price_box">
								<text class="goods_price_symbol">
									￥
								</text>
								<text class="goods_price_num">
									{{selectedLeaseItem.dailyRent}}
								</text>
								<text class="goods_price_days">/天</text>
							</view>
							<view class="goods_selected_box">
								<text>已选：</text>
								<text>{{selectedMode.join(' ')}}</text>
							</view>
							<view class="goods_tenancy_term">
								<text>租期：</text>
								<text>{{selectedLeaseItem.tenancy[0]}}</text>
								<text>个月</text>
							</view>
						</view>
					</view>
					<scroll-view scroll-y class="goods_sku_box">
						<view class="goods_card shipping_address_card" @click="getAddressInfo">
							<view class="shipping_address_box">
								<view class="iconfont icon-shouhuodizhi shipping_address_icon"></view>
								<view class="shipping_address_title_box" v-if="receiverAddressData.result.prov">
									<view class="shipping_address_name">
										<text class="fullname">{{receiverAddressData.result.fullname}}</text>
										<text class="mobilePhone">{{receiverAddressData.result.mobilePhone}}</text>
									</view>
									<view class="shipping_address_city">
										<text class="address">{{receiverAddressData.result.address}}</text>
									</view>
								</view>
								<view class="shipping_address_title_box" v-else>
									请填写您的收货地址
								</view>
								<view class="shipping_address_arrow_box">
									<u-icon name="arrow-right" size="28"></u-icon>
								</view>
							</view>
						</view>
						<view class="goods_card actually_paid_card">
							<view class="actually_paid_item" @click="checkActuallyPaid">
								<view class="actually_paid_item_title">
									实付金额
								</view>
								<view class="actually_paid_item_price">
									<text>￥</text>
									<text
										v-if="isSelectedSafe">{{(+selectedLeaseItem.initialRent + +goodsDetailData.buparCost).toFixed(2)}}</text>
									<text v-else>{{(+selectedLeaseItem.initialRent).toFixed(2)}}</text>
								</view>
								<u-icon name="arrow-right" size="28"></u-icon>
							</view>
						</view>
						<view class="goods_card sku_lease_card">
							<!-- 规格A -->
							<view class="sku_lease_item" v-if="specAList.length">
								<view class="sku_lease_title">
									{{specName[0]}}
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item lease_item" v-for="item in specAList"
										:class="selectedLeaseItem.productLeasingName === item?'active':''"
										@click="toggleSpec(0,item)">
										<view class="">
											{{item}}
										</view>
										<view class="triangle-in" v-if="selectedLeaseItem.productLeasingName === item">
										</view>
									</view>
								</view>
							</view>
							<view class="triangle">
								{{selectedLeaseItem.content}}
							</view>
							<!-- 租期 -->
							<view class="sku_lease_item" v-if="specBList.length">
								<view class="sku_lease_title">
									租期
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item active">
										{{selectedLeaseItem.tenancy[0]}}个月
									</view>
								</view>
							</view>
							<!-- 规格B -->
							<view class="sku_lease_item" v-if="specBList.length">
								<view class="sku_lease_title">
									{{specName[1]}}
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item" v-for="item in specBList"
										:class="selectedLeaseItem.specB === item?'active':''"
										@click="toggleSpec(1,item)">
										{{item}}
									</view>
								</view>
							</view>
							<!-- 规格C -->
							<view class="sku_lease_item" v-if="specCList.length">
								<view class="sku_lease_title">
									{{specName[2]}}
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item" v-for="item in specCList"
										:class="selectedLeaseItem.specC === item?'active':''"
										@click="toggleSpec(2,item)">
										{{item}}
									</view>
								</view>
							</view>
							<!-- 规格D -->
							<view class="sku_lease_item" v-if="specDList.length">
								<view class="sku_lease_title">
									{{specName[3]}}
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item" v-for="item in specDList"
										:class="selectedLeaseItem.specD === item?'active':''"
										@click="toggleSpec(3,item)">
										{{item}}
									</view>
								</view>
							</view>
							<!-- 规格E -->
							<view class="sku_lease_item" v-if="specEList.length">
								<view class="sku_lease_title">
									{{specName[4]}}
								</view>
								<view class="sku_lease_spec">
									<view class="sku_lease_spec_item" v-for="item in specEList"
										:class="selectedLeaseItem.specE === item?'active':''"
										@click="toggleSpec(4,item)">
										{{item}}
									</view>
								</view>
							</view>
							<!-- 意外保障 -->
							<view class="sku_lease_item safe_item" v-if="goodsDetailData.buparId">
								<view class="iconfont icon-baozhang1 safe_item_icon"></view>
								<view class="safe_content">
									<view class="safe_content_name">
										<text class="safe_content_title">{{goodsDetailData.buparName}}</text>
										<view class="safe_content_line"></view>
										<text class="safe_content_sub_title">租赁的必备选择</text>
										<uni-icons type="help" size="16"></uni-icons>
									</view>
									<view class="safe_content_bottom_box">
										<text class="safe_content_desc">租赁期间非人为损坏、碎屏均可原厂更换</text>
										<text class="safe_content_price">￥{{goodsDetailData.buparCost}}</text>
									</view>
								</view>
								<view class="safe_switch">
									<u-switch v-model="isSelectedSafe" size="50" asyncChange activeColor="#FD774D"
										@change="changeSafeSelected"></u-switch>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="sku_panel_btn">
						<view class="rule_box">
							<checkbox :value="isAgreeRule" color="#FD774D" @change="onCheckboxChange"
								style="transform:scale(0.7)" />
							<text @click="changeAgreeRule">我已阅读同意</text>
							<text class="rule_link" @click="checkRules">《用户租赁及服务协议》</text>
						</view>
						<view class="btn_box">
							<view class="money_box">
								<text>实付：</text>
								<text class="money_text"
									v-if="isSelectedSafe">￥{{(+selectedLeaseItem.initialRent + +goodsDetailData.buparCost).toFixed(2)}}</text>
								<text class="money_text" v-else>￥{{(+selectedLeaseItem.initialRent).toFixed(2)}}</text>
							</view>
							<form report-submit @submit="toRent">
								<!-- #ifdef H5 -->
								<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"
									class="submit_btn">
									去免押租
								</button>
								<!-- #endif -->
								<!--支付宝-->
								<!-- #ifdef MP-ALIPAY -->
								<button v-if="!isLogin" open-type="getAuthorize" scope='phoneNumber'
									@getAuthorize="getPhoneNumber" error="getPhoneError" class="submit_btn">
									登录
								</button>
								<button v-else @click="toExempt" class="submit_btn">
									去免押租
								</button>
								<!-- #endif -->
							</form>
							<view class="bubble_tips">
								点击免押评估额度
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 付款明细、合同展示 -->
		<u-popup :show="paymentDetailShow || leaseContractShow" @close="paymentDetailCloase" :round="32" overlay>
			<view class="popup_contanier">
				<view class="close_icon" @click="paymentDetailCloase">
					<u-icon name="close" size="38"></u-icon>
				</view>
				<scroll-view scroll-y style="max-height: 1100rpx;" class="payment_detail_content"
					v-if="paymentDetailShow">
					<view class="payment_detail_title_box">
						付款明细
					</view>
					<view class="goods_card amount_total_card">
						<view class="amount_total_item">
							<view class="amount_total_title">
								首期实付金额
							</view>
							<view class="amount_total_money">
								<text>￥</text>
								<text
									v-if="isSelectedSafe">{{(+selectedLeaseItem.initialRent + +goodsDetailData.buparCost).toFixed(2)}}</text>
								<text v-else>{{(+selectedLeaseItem.initialRent).toFixed(2)}}</text>
							</view>
						</view>
						<view class="amount_total_item">
							<view class="amount_total_title">
								首期合计
							</view>
							<view class="amount_total_money">
								<text>￥</text>
								<text
									v-if="isSelectedSafe">{{(+selectedLeaseItem.initialRent + +goodsDetailData.buparCost).toFixed(2)}}</text>
								<text v-else>{{(+selectedLeaseItem.initialRent).toFixed(2)}}</text>
							</view>
						</view>
						<view class="first_detail">
							<view class="first_detail_item">
								<view class="first_detail_item_left">
									首期租金
								</view>
								<view class="first_detail_item_right">
									￥{{(+selectedLeaseItem.initialRent).toFixed(2)}}
								</view>
							</view>
							<view class="first_detail_item">
								<view class="first_detail_item_left">
									剩余租金
								</view>
								<view class="first_detail_item_right">
									￥{{(+selectedLeaseItem.termRent).toFixed(2)}}*{{(+selectedLeaseItem.tenancy[0] + +selectedLeaseItem.tenancy[1])-1}}
								</view>
							</view>
							<view v-if="isSelectedSafe" class="first_detail_item">
								<view class="first_detail_item_left">
									意外保障服务
								</view>
								<view class="first_detail_item_right">
									￥{{(+goodsDetailData.buparCost).toFixed(2)}}
								</view>
							</view>
						</view>
					</view>
					<view class="goods_card rental_plan_card">
						<view class="rental_plan_title card_title">
							租金计划
						</view>
						<view class="rental_plan_table">
							<view class="rental_plan_td">
								<view class="rental_plan_th">
									租期
								</view>
								<view class="rental_plan_th">
									买断价
								</view>
								<view class="rental_plan_th">
									买断尾款
								</view>
								<view class="rental_plan_th">
									期租金
								</view>
							</view>
							<view class="rental_plan_td"
								v-for="(item,index) in paymentDetailData.rentalPlanResponseList"
								:class="index >= +selectedLeaseItem.tenancy[0]?'rental_plan_td_end':''">
								<view class="rental_plan_th">
									<view>
										第{{index + 1}}期
									</view>
									<view class="rental_plan_date">
										{{item.tenancy}}
									</view>
								</view>
								<view class="rental_plan_th">
									{{item.buyoutPayment}}
								</view>
								<view class="rental_plan_th">
									{{item.buyoutRetainPayment}}
								</view>
								<view class="rental_plan_th">
									{{item.termRent}}
								</view>
							</view>
						</view>
					</view>
					<view class="goods_card post_tenancy_card">
						<view class="post_tenancy_title card_title">
							租赁到期之后的选择
						</view>
						<view class="lease_option_box">
							<view class="lease_option_item">
								<view class="lease_option_item_logo_box">
									<view class="lease_option_item_logo">
										<view class="iconfont icon-xuzu"></view>
									</view>
								</view>
								<view class="lease_option_item_title">
									续租
								</view>
								<view class="lease_option_item_sub_title">
									延长租期，到期即送
								</view>
							</view>
							<view class="lease_option_item">
								<view class="lease_option_item_logo_box">
									<view class="lease_option_item_logo">
										<view class="iconfont icon-fukuan"></view>
									</view>
								</view>
								<view class="lease_option_item_title">
									买断
								</view>
								<view class="lease_option_item_sub_title">
									支付尾款，终生拥有
								</view>
								<view class="lease_option_item_tips">
									越早买断越划算
								</view>
							</view>
							<view class="lease_option_item">
								<view class="lease_option_item_logo_box">
									<view class="lease_option_item_logo">
										<view class="iconfont icon-guihuan"></view>
									</view>
								</view>
								<view class="lease_option_item_title">
									归还
								</view>
								<view class="lease_option_item_sub_title">
									归还旧机，畅享新机
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="lease_contract_content" v-else-if="leaseContractShow">
					<view class="lease_contract_title_box">
						租赁及相关服务协议
					</view>
					<view class="lease_contract_sub_title_box">
						我已阅读并同意申请调用数字证书签署以下合同
					</view>
					<view class="lease_contract_box">
						<scroll-view class="scroll_view_H" scroll-x style="width: 100%">
							<!-- contractList -->
							<view v-for="(item,index) in contractList" class="scroll_view_item_H"
								:class="index == contractIndex?'active':''" @click="toggleContractItem(item,index)">
								<view class="contract_text">
									{{item.title}}
								</view>
								<view class="active_line"></view>
							</view>
						</scroll-view>
						<view>
							<scroll-view class="scroll_view_H" scroll-y style="width: 100%;height:700rpx">
								<contract :title="contractContent">
								</contract>
							</scroll-view>
						</view>
					</view>
					<view class="contract_btn_box">
						<view class="contract_btn agree" onTap="handleAgree">
							我已阅读并同意
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let app = getApp();
	import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue'
	import contract from '@/components/contract/index.vue';
	import {
		getProductDetail,
		getProductLeaseParticulars,
		getProductPaymentDetail
	} from '@/api/product.js'
	import {
		sevenRealnamed,
		AliexemptDeposit,
		toCreateOrderForm,
		EFaceVerify,
		pollingSerchResult
	} from '@/api/order.js';
	import {
		aliminiLogin,
		getAliUserInfo,
		analyzAliPhone,
		userCenterInfo
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			mpHtml,
			contract
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				swiperConfig: {
					autoplay: true,
					interval: 2000,
					duration: 500,

				},
				productId: '',
				merId: '',
				goodsDetailData: {},
				goodsLeaseInfo: {},
				isLoading: true,
				systemInfo: {},
				current: 1,
				// 规格1列表
				specAList: [],
				// 规格2列表
				specBList: [],
				// 规格3列表
				specCList: [],
				// 规格4列表
				specDList: [],
				// 规格5列表
				specEList: [],
				// 已选租赁规格
				selectedMode: [],
				selectedLeaseItem: {},
				// 商品参数数据
				specificationParameter: [],
				// 付款详情数据
				paymentDetailData: {},
				// 规格名称
				specName: [],
				// 商户tag 列表
				mer_list: ['全新正品', '极速审核', '正品保障', '售后电话', '芝麻信用免押'],
				// 租赁卡片
				rental_procedure_list: [{
					text: '租赁流程',
					icon: 'icon-liuzhuan',
					pick_icon: 'icon-liuzhuang_pick',
					selected: true
				}, {
					text: '租期计算',
					icon: 'icon-jisuan',
					pick_icon: 'icon-jisuan_pick',
					selected: false
				}, {
					text: '租后方案',
					icon: 'icon-fangan',
					pick_icon: 'icon-fangan_pick',
					selected: false
				}, {
					text: '品牌保障',
					icon: 'icon-baozhang',
					pick_icon: 'icon-baozhang_pick',
					selected: false
				}, ],
				// 租赁流程
				procedure_list: [{
					text: '选品下单',
					ind: '01'
				}, {
					text: '确认订单',
					ind: '02'
				}, {
					text: '月付租金',
					ind: '03'
				}, {
					text: '买断/续租/归还',
					ind: '04'
				}],
				// 租赁计算
				lease_calculation_list: [{
					days_arr: ['4', '5'],
					text: '快递中'
				}, {
					days_arr: ['6'],
					text: '签收'
				}, {
					days_arr: ['7', '8', '9'],
					text: '实际使用天数'
				}, {
					days_arr: ['10'],
					text: '接收'
				}, {
					days_arr: ['11', '12'],
					text: '快递中'
				}],
				// 租后方案
				post_lease_scheme_list: [{
					title: '买断',
					text: '支付尾款 终身拥有'
				}, {
					title: '续租',
					text: '延长租期 租满即送'
				}, {
					title: '归还',
					text: '归还旧机 结束租赁'
				}],
				// 品牌保障
				brand_guarantee_list: [{
					icon: 'icon-zhengpinbaozheng',
					text: '品牌授权 正品保障'
				}, {
					icon: 'icon-shangjia',
					text: '芝麻信用 优选商家'
				}, {
					icon: 'icon-shouhouwuyou',
					text: '专业细致 售后无忧'
				}, ],
				detail_tab_list: [{
					name: '商品详情',
					selected: true
				}, {
					name: '租赁说明',
					selected: false
				}, {
					name: '常见问题',
					selected: false
				}],
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
				parameterShow: false, // 是否弹窗展示参数
				keFuShow: false, // 是否弹窗展示客服
				skuPanelShow: false, // sku面板是否展示
				isAgreeRule: false, // 是否已阅读并同意租赁协议
				isSelectedSafe: false, // 是否选择意外保障
				receiverAddressData: {}, // 收货地址数据
				paymentDetailShow: false, // 付款明细是否弹窗展示
				leaseContractShow: false, // 租赁合同弹窗展示
				contractList: [{
					title: '租赁服务协议',
					content: 'shuangfangfansuhetong',
				}, {
					title: '个人信息查询授权书',
					content: 'personalinformation',
				}, {
					title: '增值服务',
					content: 'valueaddedservices',
				}, {
					title: '个人征信授权书',
					content: 'creditinvestigation',
				}, {
					title: '委托担保申请书',
					content: 'guaranteeapply',
				}, ],
				contractIndex: 0,
				contractContent: 'shuangfangfansuhetong',
				orderNo: '', //后台返回的临时订单信息 贯穿人脸和下单
				realStatus: '', //支付宝实名信息
			};
		},
		onLoad(option) {
			console.log(this.isLogin, '登录信息')
			let that = this;
			that.productId = option.id;
			that.merId = option.merId;
			uni.getStorage({
				key: 'receiverAddressData',
				success(res) {
					if (res.data) that.receiverAddressData = res.data;
				}
			})
			that.getGoodsDetail();
			that.getGoodsLeaseInfo();
			that.getNacBar();
			if (this.isLogin) {
				this.isRealName();
			}
		},
		methods: {
			onCheckboxChange(event) {
				this.isAgreeRule = event.detail.value;
			},
			getNacBar() {
				let that = this;
				//获取手机系统信息
				that.systemInfo = app.globalData.systemInfo;
			},
			// 获取商品详情数据
			getGoodsDetail() {
				let that = this;
				let params = {
					merId: that.merId
				}
				getProductDetail(that.productId, params).then(res => {
					if (res.code == 200) {
						that.isLoading = false;
						that.goodsDetailData = res.data;
						that.goodsDetailData.sliderImage = that.goodsDetailData.sliderImage.split(';')
						that.goodsDetailData.serviceTagName = that.goodsDetailData.serviceTagName.split(';')
						that.goodsDetailData.specName = that.goodsDetailData.specName.split(',');
						let specificationParameter = []
						that.goodsDetailData.specificationParameter = that.goodsDetailData.specificationParameter
							.split(';');

						that.goodsDetailData.specificationParameter.forEach((item, index) => {
							specificationParameter.push(item.split(':'))
							that.specificationParameter.push(item.split(':')[1])
						})
						that.goodsDetailData.specificationParameter = specificationParameter;
						// checkTheType
						that.isSelectedSafe = that.goodsDetailData.checkTheType === 1 ? false : true;
						console.log('goodsDetailData', that.goodsDetailData);
					}
				})
			},
			// 获取租赁规格数据
			getGoodsLeaseInfo() {
				let that = this;
				let params = {
					merId: that.merId
				}
				getProductLeaseParticulars(that.productId, params).then(res => {
					if (res.code == 200) {
						this.goodsLeaseInfo = res.data
						this.specName = this.goodsLeaseInfo[0].specName
						that.handleLeaseData(res.data)
					}
				})
			},
			// 处理租赁规格数据
			handleLeaseData(info) {
				let that = this;
				let specAList = info.map(item => item.productLeasingName)
				that.specAList = [...new Set(specAList)].filter(item => item);
				let specBList = info.map(item => item.specB)
				that.specBList = [...new Set(specBList)].filter(item => item);
				let specCList = info.map(item => item.specC)
				that.specCList = [...new Set(specCList)].filter(item => item);
				let specDList = info.map(item => item.specD)
				that.specDList = [...new Set(specDList)].filter(item => item);
				let specEList = info.map(item => item.specD)
				that.specEList = [...new Set(specEList)].filter(item => item);

				if (that.specAList.length) that.selectedMode[0] = that.specAList[0]
				if (that.specBList.length) that.selectedMode[1] = that.specBList[0]
				if (that.specCList.length) that.selectedMode[2] = that.specCList[0]
				if (that.specDList.length) that.selectedMode[3] = that.specDList[0]
				if (that.specEList.length) that.selectedMode[4] = that.specEList[0]
				that.getSelectedLease()
			},
			// 切换规格
			toggleSpec(ind, item) {
				let that = this;
				that.selectedMode[ind] = item;
				console.log('item', item);
				that.getSelectedLease();
				that.getPaymentDetail();
			},
			// 获取当前选择的租赁规格项
			getSelectedLease() {
				let that = this;
				let len = that.selectedMode.length;
				let selectedItem = that.goodsLeaseInfo.filter((item, index) => {
					let isFlag;
					if (item.productLeasingName)
						isFlag = item.productLeasingName == that.selectedMode[0];

					if (item.specB)
						isFlag = item.productLeasingName == that.selectedMode[0] && item.specB == that
						.selectedMode[1];

					if (item.specC)
						isFlag = item.productLeasingName == that.selectedMode[0] && item.specB == that
						.selectedMode[1] && item
						.specC == that.selectedMode[2];

					if (item.specD)
						isFlag = item.productLeasingName == that.selectedMode[0] && item.specB == that
						.selectedMode[1] && item
						.specC == that
						.selectedMode[2] && item.specD == that.selectedMode[3];

					if (item.specE)
						isFlag = item.productLeasingName == that.selectedMode[0] && item.specB == that
						.selectedMode[1] && item
						.specC == that
						.selectedMode[2] && item.specD == that.selectedMode[3] && item.specE == that.selectedMode[
							4];

					return isFlag
				})
				this.selectedLeaseItem = selectedItem[0];
				if (!(this.selectedLeaseItem.tenancy instanceof Array))
					this.selectedLeaseItem.tenancy = this.selectedLeaseItem.tenancy.split(',')
				console.log('selectedLeaseItem', this.selectedLeaseItem);
			},
			// 获取当前选择规格的付款明细
			getPaymentDetail() {
				let that = this;
				getProductPaymentDetail(this.selectedLeaseItem.productSkuLeaseId).then(res => {
					if (res.code == 200) {
						that.paymentDetailData = res.data;
						console.log('paymentDetail', that.paymentDetailData);
					}
				})
			},
			// 轮播图切换事件
			changeSwiper(current) {
				let that = this;
				that.current = current.detail.current + 1
			},
			// 切换租赁流程项事件
			toggleRentalProcedure(item, index) {
				let that = this;
				that.rental_procedure_list.forEach((key, ind) => {
					if (index == ind) key.selected = true;
					else key.selected = false;
				})
			},
			// 切换商品详情tab事件
			toggleDetailTab(item, index) {
				let that = this;
				that.detail_tab_list.forEach((key, ind) => {
					if (index == ind) key.selected = true;
					else key.selected = false;
				})
			},
			// 点击通知事件
			toInform() {
				console.log('点击通知事件');
			},
			// 点击首页事件
			toHome() {
				uni.switchTab({
					url: '/page/index/index'
				})
			},
			// 点击收藏事件
			toShouCang() {
				console.log('点击收藏事件');
			},
			// 点击客服
			toKeFu() {
				this.keFuShow = true;
			},
			// 点击进店逛逛
			toShop() {
				console.log('点击进店逛逛');
			},
			// 点击查看参数
			checkParameter() {
				this.$refs.popup.open('bottom')
				this.parameterShow = true;
			},
			// popup 弹窗关闭事件
			popupClose() {
				this.$refs.popup.close()
				this.parameterShow = false;
				this.skuPanelShow = false;
			},
			paymentDetailCloase() {
				this.paymentDetailShow = false;
				this.leaseContractShow = false;
			},
			// modal 弹窗关闭事件
			modalClose() {
				this.keFuShow = false;
			},
			// 点击商家客服事件
			shangJiaPhone() {
				uni.makePhoneCall({
					phoneNumber: app.globalData.kfPhone
				})
			},
			// 点击平台客服事件
			pingTaiPhone() {
				uni.makePhoneCall({
					phoneNumber: app.globalData.kfPhone
				})
			},
			// 点击立即下单事件
			handleSkuPanel() {
				this.getPaymentDetail();
				this.$refs.popup.open('bottom');
				this.skuPanelShow = true;
			},
			// 查看用户租赁及服务协议
			checkRules() {
				this.leaseContractShow = true;
			},
			// 修改意外保障的开启状态
			changeSafeSelected() {
				// 即勾选类型不是默认强制勾选
				if (this.goodsDetailData.checkTheType !== 2) {
					this.isSelectedSafe = !this.isSelectedSafe;
				}
			},
			// 去获取收货地址信息
			getAddressInfo() {
				let that = this;
				uni.chooseAddress({
					success(res) {
						console.log('getAddressInfo', res);
						if (res.resultStatus === '9000') {
							that.receiverAddressData = res;
							console.log(res.result, '切换地址')
							uni.setStorage({
								key: 'receiverAddressData',
								data: res
							});
						}
					}
				})
			},
			// 查看付款明细
			checkActuallyPaid() {
				this.paymentDetailShow = true
			},
			// 切换是否阅读协议
			changeAgreeRule(e) {
				this.isAgreeRule = true;
				console.log(this.isAgreeRule)
			},
			toggleContractItem(item, index) {
				this.contractIndex = index;
				this.contractContent = item.content;
			},
			//查看用户是否实名
			isRealName() {
				userCenterInfo().then(res => {
					this.realStatus = res.data.realName;
				}).catch(err => {});
			},

			//地址解析经纬度
			getLocation(address) {
				const url = `https://restapi.amap.com/v3/geocode/geo?address=${address}&output=JSON&key=${this.GaoDeKey}`;
				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						method: 'GET',
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(new Error('地址解析失败'));
							}
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},
			//经纬度解析地址
			getHomeAddress(locat) {
				const url =
					`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${locat}&key=${this.GaoDeKey}&radius=1000&extensions=all`;
				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						method: 'GET',
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(new Error('地址解析失败'));
							}
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},
			//免押，先去免押拿到临时order
			async toExempt() {
				let that = this;

				if (!this.receiverAddressData.result) {
					return this.$util.Tips({
						title: '请选择收货地址'
					});
				}
				if (!this.isAgreeRule) {
					return this.$util.Tips({
						title: '请勾选用户租赁服务协议'
					});
				}
				let goods = {
					goodsId: this.productId, //商品id
					goodsAttrId: this.selectedLeaseItem.productSkuLeaseId, //规格id
					platform: 1, //支付宝
					orderSource: 2, //下单渠道来源
					receivingName: this.receiverAddressData.userName, //收货人姓名
					receivingAddress: this.receiverAddressData.result.address, //收货人地址
					receivingPhone: this.receiverAddressData.result.mobilePhone, //手机号
					receiveProvince: this.receiverAddressData.provinceName, //收货人所在省
					receiveCity: this.receiverAddressData.cityName, //收货所在市
					receiveDistrict: this.receiverAddressData.countyName, //收货所在区/县
					receiveStreet: this.receiverAddressData.result.street, //收货所在街道/镇
					receiveLocationLng: '', //收货经度--
					receiveLocationLat: '', //收货纬度--
					orderingAddress: '', //下单位置地址--
					orderingLng: '', //下单经度,--
					orderingLat: '', //下单纬度--
					orderingProvince: '', //下单位置所在省--
					orderingCity: '', //下单所在市--
					orderingDistrict: '', //所在区/县--
					orderingStreet: '', //所在街道/镇--
					safeId: this.isSelectedSafe ? this.goodsDetailData.buparId : '', //意外保障id
					note: '', //下单备注
				}

				const LatLong = await this.getLocation(goods.receiveProvince + goods.receiveCity + goods
					.receiveDistrict + goods.receiveStreet + goods.receivingAddress);
				let result1 = LatLong.geocodes[0].location.split(',');
				[goods.receiveLocationLng, goods.receiveLocationLat] = result1;

				uni.getLocation({
					type: 'wgs84',
					geocode: true, //该参数是为了获取经纬度城市信息
					success: function(res) {
						goods.orderingLng = res.longitude;
						goods.orderingLat = res.latitude; 
						that.getHomeAddress(goods.orderingLng + ',' + goods.orderingLat)
							.then(result2 => {
								goods.orderingAddress = result2.regeocode.formatted_address;
								goods.orderingProvince = result2.regeocode.addressComponent.province;
								goods.orderingCity = !Array.isArray(result2.regeocode.addressComponent.city) ? result2.regeocode.addressComponent.city : result2.regeocode.addressComponent.province;//解决直辖市city返回空的问题
								goods.orderingDistrict = result2.regeocode.addressComponent.district;
								goods.orderingStreet = result2.regeocode.addressComponent.township;
								
								uni.showLoading({
								    title: '正在生成订单'
								});
								
								AliexemptDeposit(goods)
									.then(res => {
										if (res.code == 200) {
											that.orderNo = res.data;
											uni.hideLoading();
											if (that.realStatus != '') { //如果已经实名
												//查看七天內是否认证过
												sevenRealnamed()
													.then(result => {
														console.log('人脸结果', result);
														//为假就要人脸已经实名不需要二要素
														if (!result.data) {
															that.EFaceAIVerify(); //去人脸
														} else {
															that.toPayMyPhone(); //直接付款
														}
													})
											} else {
												//查看七天內是否认证过
												uni.navigateTo({
													url: '/pages/users/uploadUserInfoAli/idVerify?orderNo=' +
														that.orderNo
												});
												// sevenRealnamed()
												// 	.then(result => {
												// 		console.log('人脸结果', result);
												// 		//为假就要人脸 在这就要进行二要素认证了
												// 		if (!result.data) {

												// 		} else {
												// 			that.toPayMyPhone();
												// 		}
												// 	})
											}

										}
									})
							})
					},
					fail: function(error) {
						console.error('获取位置失败: ', error);
					}
				});
			},

			//去人脸
			EFaceAIVerify() {
				let that = this;
				EFaceVerify({
						faceauthMode: 'ESIGN',
						callBackUrl: 1,
						orderNo: this.orderNo
					})
					.then(res => {
						if (res.code == 200) {
							console.log(res, '跳转的链接')
							uni.setStorage({
								key: 'flowId',
								data: res.data.flowId,
								success: function() {
									var originalUrl = res.data.originalUrl;
									my.ap.navigateToAlipayPage({
										path: encodeURI(originalUrl),
										success: () => {
											//轮询人脸状态
											that.queryResults();
										},
										fail: (error) => {
											my.alert({
												content: '失败：' + JSON.stringify(error)
											});
										}
									})
								}
							});

						}
					})
			},

			//轮询查询人脸识别结果
			queryResults() {
				let that = this;
				let checkedCode = setInterval(() => {
					uni.getStorage({
						key: 'flowId',
						success: function(res) {
							if (res.data) {
								pollingSerchResult({
										flowId: res.data
									})
									.then(rusult => {
										if (rusult.data) {
											uni.removeStorageSync('flowId');
											clearInterval(checkedCode)
											that.toPayMyPhone();
										}
									})
							}

						}
					});
				}, 3000)
			},




			//下单流程---->支付宝
			toPayMyPhone() {
				toCreateOrderForm(this.orderNo)
					.then(res => {
						console.log(res, '下单结束')
						if (res.code == 200) { //准备唤起芝麻免押
							my.tradePay({
								orderStr: res.data
									.orderStr, // 完整的支付参数拼接成的字符串，从 alipay.fund.auth.order.app.freeze 接口获取
								success: (rusult) => {
									// console.log(JSON.stringify(res), '不是JOSN');
									// console.log(JSON.stringify(res), 'JSON');
									if (rusult.resultCode == 9000) {
										uni.redirectTo({
											url: '/pages/other/orderSuccess'
										})
									} else {
										uni.showToast({
											title: '免押失败',
											icon: 'none'
										})
									}
								},
								fail: (rusult) => {
									console.log('免押失败');
									console.log(JSON.stringify(rusult), '不是JOSN');
									console.log(JSON.stringify(rusult), 'JSON');
									uni.showToast({
										title: rusult.memo,
										icon: 'none'
									})
								}
							});
						}
					})
			},

			//支付宝模块登录
			getPhoneNumber() {
				uni.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData)
						analyzAliPhone({
								signDate: encryptedData
							})
							.then(resp => {
								this.aliMiniPhone = JSON.parse(resp.data.phone).mobile;
								this.getAliToken();
							})
							.catch(err => {
								return this.$util.Tips({
									title: err
								})
							});
					},
					fail: (res) => {
						uni.showToast({
							title: "授权手机号码失败"
						});
					},
				});
			},
			//拿到用户token穿给后端获取accesstoken
			getAliToken() {
				my.getAuthCode({
					scopes: 'auth_user',
					success: (authCodeRes) => {
						const authCode = authCodeRes.authCode;
						console.log('获取用户token', authCode)
						aliminiLogin({
								authCode: authCode,
								phone: this.aliMiniPhone,
							})
							.then(res => {
								console.log('后台传回来的信息')
								uni.setStorageSync('userOnlyId', JSON.stringify(res.data))
								this.miniGetUserInfo(authCode, res.data.accessToken, res.data.openId);
							})
							.catch(err => {
								return this.$util.Tips({
									title: err
								})
							});
					}
				});
			},
			//小程序获取用户信息
			miniGetUserInfo(token, accessToken, openId) {
				getAliUserInfo({
						authCode: token,
						accessToken: accessToken,
						openId: openId,
						phone: this.aliMiniPhone
					})
					.then(res => {
						console.log('获取支付宝用户信息', res)
						this.$store.commit("SETUID", res.data.id);
						this.$store.commit("LOGIN", {
							'token': res.data.token
						});
						uni.setStorageSync('aliPhone', this.aliMiniPhone);
						uni.setStorageSync('accessToken', accessToken);
						this.isRealName();
					})
					.catch(err => {
						return this.$util.Tips({
							title: err
						})
					});
			},
		},
		// 分享事件
		onShareAppMessage(res) {
			if (res.from === 'button') {
				console.log('res', res)
			}
			return {
				title: '商品详情',
				path: '/subpage/goods-detail/index?id=' + this.productId + '&merId=' + this.merId,
				imageUrl: this.goodsDetailData.sliderImage[0],
				desc: this.goodsDetailData.name
			}
		},
		//准备下订单了
		toRent() {

		}
	};
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	p,
	img,
	rich-text {
		margin: 0;
		padding: 0;
	}

	.container {
		box-sizing: border-box;
		width: 100%;
		background: #F6F6F6;
		margin-bottom: 180rpx;

		.swiper_top_box {
			box-sizing: border-box;
			position: relative;
			width: 100%;

			.swiper {
				width: 100%;
				height: 750rpx;

				.swiper_item {
					width: 100%;
					height: 750rpx;

					image {
						width: 100%;
						height: 750rpx;
					}
				}
			}

			.indicator_dots {
				position: absolute;
				bottom: 20rpx;
				right: 30rpx;
				color: #999;
			}
		}

		.zhima_credit_box {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background-color: #e1f5fc !important;
			width: 100%;
			padding: 10rpx 24rpx;
			border-radius: 24rpx;

			.zhima_credit_img {
				width: 40rpx;
				height: 40rpx;
			}

			.zhima_credit_text {
				margin-left: 20rpx;
				font-weight: bold;
			}
		}

		// 商品详情卡片
		.detail_card_box {
			box-sizing: border-box;
			padding: 24rpx;

			// 商品价格卡片
			.goods_price_box {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 24rpx 24rpx 46rpx;
				background: linear-gradient(45deg, #F84B29 0%, #FD794E 100%);
				border-radius: 16rpx;

				.goods_price {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;

					.price_num {
						font-size: 48rpx;
						margin: 0 5rpx;
					}
				}

				.goods_logo_top {
					font-family: YS-HelloFont, YS-HelloFont;
					font-weight: normal;
					font-size: 36rpx;
					color: rgba(255, 255, 255, 0.9);
					line-height: 52rpx;
				}

				.goods_logo_tag {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.9);
					line-height: 28rpx;
					text-align: center;
				}
			}

			// 商品标题卡片
			.goods_name_card {
				box-sizing: border-box;
				margin-top: -30rpx;

				.goods_title_box {
					box-sizing: border-box;
					width: 100%;
					line-height: 48rpx;
					margin-bottom: 18rpx;

					.color_commodity {
						background: linear-gradient(270deg, #FEF3ED 0%, #FEEAF7 100%);
						border-radius: 8rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FA2C19;
						text-align: center;
						margin-right: 8rpx;
						padding: 0 8rpx;
					}

					.goods_name {
						font-weight: 600;
						font-size: 32rpx;
						color: rgba(0, 0, 0, 0.85);
					}
				}

				.service_tag_list {
					box-sizing: border-box;
					display: flex;
					margin-bottom: 26rpx;

					.service_tag_item {
						display: flex;
						align-items: center;
						margin-right: 24rpx;

						.service_tag_item_img {
							width: 16rpx;
							height: 16rpx;
							margin-right: 6rpx;
						}
					}

					.service_tag_item:last-child {
						margin-right: 0;
					}

					.service_tag_item_name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.65);
						line-height: 28rpx;
					}
				}

				.goods_opertion_box {
					box-sizing: border-box;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.goods_opertion_item {
						box-sizing: border-box;
						width: 25%;
						display: flex;
						justify-content: center;
						align-items: center;

						.goods_opertion_item_title {
							margin-left: 8rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.45);
							line-height: 32rpx;
						}
					}

					.share_btn {
						border: none;
						height: 100%;
					}
				}
			}

			// 商品选择卡片
			.product_option_card {
				box-sizing: border-box;

				.product_option_item {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;

					.product_option_title {
						margin-right: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.45);
						line-height: 36rpx;
					}

					.product_option_content {
						flex: 1;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.85);
						line-height: 36rpx;
					}
				}

				.product_option_item:last-child {
					margin-bottom: 0;
				}

			}

			// 商户卡片
			.mer_info_card {
				box-sizing: border-box;

				.mer_top_box {
					box-sizing: border-box;
					display: flex;
					padding-bottom: 36rpx;
					margin-bottom: 32rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

					image {
						width: 72rpx;
						height: 72rpx;
					}

					.mer_title_box {
						flex: 1;
						margin-left: 16rpx;

						.mer_name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.85);
							line-height: 36rpx;
							margin-bottom: 4rpx;
						}

						.company_name {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.85);
							line-height: 32rpx;
						}
					}

					.mer_btn_container {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 232rpx;
						height: 64rpx;
						background: rgba(251, 95, 58, 0.3);
						border-radius: 72rpx;

						.mer_btn_box {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 220rpx;
							height: 50rpx;
							background: linear-gradient(180deg, #FD774D 0%, #F95733 100%);
							box-shadow: inset 0rpx 0rpx 4rpx 0rpx #FFBC0A;
							border-radius: 56rpx;
							border: 0rpx solid #FFFCF2;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 50rpx;

							.mer_logo {
								margin-right: 8rpx;
							}
						}
					}
				}

				.mer_tag_box {
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.65);
					line-height: 28rpx;

					.mer_tag_item {
						display: flex;
						align-items: center;

						.mer_tag_logo {
							font-size: 20rpx;
							margin-right: 6rpx;
						}
					}
				}

			}

			// 商品推荐
			.goods_recommend_box {
				.goods_recommend_title {
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}

			// 租赁流程
			.rental_procedure_card {
				.rental_procedure_top_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;

					.rental_procedure_item {
						text-align: center;

						.rental_item_icon {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 80rpx;
							height: 80rpx;
							background: rgba(0, 0, 0, 0.05);
							border-radius: 40rpx;
							margin: auto;
							margin-bottom: 24rpx;
						}

						.rental_item_text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.65);
							line-height: 40rpx;
						}
					}

					.rental_procedure_item.active .rental_item_icon {
						background: #FF6E13;
					}

					.rental_procedure_item.active .rental_item_text {
						color: #FF6E13;
					}
				}

				.rental_content {
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 48rpx 8rpx 48rpx 8rpx;
					padding: 16rpx;

					// 租赁流程
					.rental_content_item {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.procedure_list_box {
							box-sizing: border-box;
							height: 108rpx;
							width: 23.5%;
							padding-top: 20rpx;
							background: #FFFFFF;
							border-radius: 32rpx 8rpx 32rpx 8rpx;
							text-align: center;

							.procedure_list_ind {
								font-family: DOUYUFont;
								font-size: 28rpx;
								color: #FF6E13;
								line-height: 36rpx;
								margin-bottom: 6rpx;
							}

							.procedure_list_text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.85);
								line-height: 28rpx;
							}
						}
					}

					// 租赁计算
					.lease_calculation_content {
						width: 100%;
						box-sizing: border-box;
						text-align: center;

						.lease_calculation_content_top {
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							margin-bottom: 16rpx;

							.lease_calculation_days {
								width: 100%;
								display: flex;
								margin-bottom: 16rpx;

								.lease_calculation_days_item {
									width: 64rpx;
									height: 64rpx;
									background: #FFFFFF;
									margin-right: 2rpx;
									line-height: 64rpx;
									color: #595959;
								}
							}

							.lease_calculation_text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(0, 0, 0, 0.45);
							}

							.lease_calculation_list_box:first-child .lease_calculation_days_item:first-child {
								border-radius: 49rpx 0rpx 0rpx 49rpx;
							}

							.lease_calculation_list_box:last-child .lease_calculation_days_item:last-child {
								border-radius: 0rpx 49rpx 49rpx 0rpx;
							}

							.lease_calculation_list_box:nth-child(2) .lease_calculation_days_item,
							.lease_calculation_list_box:nth-child(3) .lease_calculation_days_item {
								background: #FF6E13;
								color: #FFFFFF;
							}

							.lease_calculation_list_box:nth-child(2) .lease_calculation_text,
							.lease_calculation_list_box:nth-child(3) .lease_calculation_text {
								color: #FF6E13;
							}

							.lease_calculation_list_box:nth-child(4) .lease_calculation_days_item {
								background: rgba(255, 110, 19, 0.65);
								color: #FFFFFF;
							}
						}

						.lease_calculation_list_example {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.85);
						}
					}

					// 租后方案
					.post_lease_scheme_content {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.post_lease_scheme_list_box {
							box-sizing: border-box;
							height: 108rpx;
							width: 32%;
							padding-top: 20rpx;
							background: #FFFFFF;
							border-radius: 32rpx 8rpx 32rpx 8rpx;
							text-align: center;

							.post_lease_scheme_list_title {
								font-family: DOUYUFont;
								font-size: 28rpx;
								color: #FF6E13;
								line-height: 36rpx;
								margin-bottom: 6rpx;
							}

							.post_lease_scheme_list_text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.85);
								line-height: 28rpx;
							}
						}
					}

					// 品牌保障
					.brand_guarantee_content {
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.brand_guarantee_list_box {
							box-sizing: border-box;
							height: 108rpx;
							width: 32%;
							padding-top: 14rpx;
							background: #FFFFFF;
							border-radius: 32rpx 8rpx 32rpx 8rpx;
							text-align: center;

							.brand_guarantee_list_icon {
								font-size: 32rpx;
							}

							.brand_guarantee_list_text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: rgba(0, 0, 0, 0.85);
								line-height: 28rpx;
								margin-top: 14rpx;
							}
						}
					}
				}
			}
		}

		// 商品详情tab卡片
		.detail_tab_card_box {
			box-sizing: border-box;

			.detail_tab_list_box {
				height: 84rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				padding: 0 36rpx;
				line-height: 80rpx;

				.detail_tab_list_item {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.85);
				}

				.detail_tab_list_item.active {
					color: #FF6E13;
				}

				.detail_tab_list_item_line {
					width: 72rpx;
					height: 4rpx;
					background: #FF6E13;
					border-radius: 2rpx;
					margin: auto;
				}
			}
		}

		// 底部按钮
		.bottom_box {
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			padding: 12rpx 24rpx 56rpx;

			.bottom_left_box {
				box-sizing: border-box;
				padding: 32rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bottom_left_item {
					text-align: center;

					.nav_icon {
						font-size: 40rpx;
						margin-bottom: 8rpx;
					}

					.nav_text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.65);
						line-height: 28rpx;
					}
				}
			}

			.bottom_right_box {
				box-sizing: border-box;

				.bottom_btn_box {
					width: 384rpx;
					height: 88rpx;
					background: #FF6E13;
					border-radius: 44rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}

		.goods_card {
			box-sizing: border-box;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}

		.goods_card:last-child {
			margin-bottom: 0;
		}
	}

	.popup_contanier {
		position: relative;
		box-sizing: border-box;

		.close_icon {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
			z-index: 9999;
		}

		.parameter_content {
			box-sizing: border-box;
			padding: 32rpx;

			.parameter_title_box {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 32rpx;
			}

			.parameter_content_box {
				box-sizing: border-box;
				padding: 40rpx 32rpx;
				background: rgba(0, 0, 0, 0.03);
				border-radius: 16rpx;

				.parameter_content_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32rpx;

					.parameter_content_item_title {
						width: 250rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.65);
						line-height: 44rpx;
					}

					.parameter_content_item_value {
						flex: 1;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 44rpx;
					}
				}

				.parameter_content_item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.sku_panel_content {
			position: relative;
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #f2f2f2;
			max-height: 1200rpx;

			.procedure_label_box {
				box-sizing: border-box;
				position: absolute;
				top: -66rpx;
				left: 0;
				width: 100%;
				background: #e07d00;
				color: #fff;
				padding: 20rpx;
				font-size: 26rpx;
			}

			.goods_detail_box {
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.goods_pic_box {
					margin-right: 24rpx;
				}

				.goods_des_box {
					flex: 1;

					.goods_price_box {
						color: #FE1700;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FE1700;
						line-height: 34rpx;
						margin-bottom: 16rpx;

						.goods_price_symbol,
						.goods_price_days {
							font-size: 24rpx;
						}

						.goods_price_num {
							font-size: 44rpx;
							margin: 0 5rpx;
						}
					}

					.goods_selected_box,
					.goods_tenancy_term {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.85);
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.goods_sku_box {
				box-sizing: border-box;
				max-height: 850rpx;
				padding-bottom: 220rpx;

				.shipping_address_card {
					width: 100%;

					.shipping_address_box {
						display: flex;
						width: 100%;
						align-items: center;

						.shipping_address_icon {
							font-size: 36rpx;
							margin-right: 24rpx;
						}

						.shipping_address_title_box {
							flex: 1;
							font-size: 28rpx;

							.shipping_address_name {
								margin-bottom: 5rpx;

								.fullname {
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.actually_paid_card {
					box-sizing: border-box;

					.actually_paid_item {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;

						.actually_paid_item_price {
							flex: 1;
							text-align: right;
							margin-right: 5rpx;
						}
					}
				}

				.sku_lease_card {
					.sku_lease_item {
						margin-bottom: 32rpx;

						.sku_lease_title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.85);
							line-height: 40rpx;
							margin-bottom: 24rpx;
						}

						.sku_lease_spec {
							display: flex;
							flex-wrap: wrap;

							.sku_lease_spec_item {
								box-sizing: border-box;
								padding: 7rpx 32rpx;
								background: #F5F5F5;
								border-radius: 32rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: rgba(0, 0, 0, 0.85);
								line-height: 36rpx;
								margin-right: 32rpx;
							}

							.sku_lease_spec_item:last-child {
								margin-right: 0;
							}

							.sku_lease_spec_item.active {
								background: rgba(255, 110, 19, 0.05);
								border-radius: 32rpx;
								border: 2rpx solid #FF6E13;
								color: #FF6E13;
							}

							.lease_item {
								position: relative;

								.triangle-in {
									/* 三角形使用绝对定位 , 父容器使用相对定位 */
									position: absolute;
									bottom: -20rpx;
									left: 50%;
									transform: translateX(-50%);
									width: 0;
									height: 0;
									border-style: solid;
									border-width: 10rpx;
									border-color: transparent transparent #eee transparent;
									font-size: 0;
									line-height: 0;
								}


							}
						}
					}

					.triangle {
						box-sizing: border-box;
						width: 620rpx;
						padding: 14rpx;
						font-size: 26rpx;
						color: #ababab;
						background-color: #eee;
						border-radius: 24rpx;
						margin-bottom: 32rpx;
					}

					.sku_lease_item:first-child {
						margin-bottom: 18rpx;
					}

					.sku_lease_item:last-child {
						margin-bottom: 0;
					}

					.safe_item {
						display: flex;
						align-items: center;

						.safe_item_icon {
							font-size: 40rpx;
							margin-right: 7rpx;
						}

						.safe_content {
							flex: 1;

							.safe_content_name {
								display: flex;
								align-items: center;
								margin-bottom: 7rpx;

								.safe_content_title {
									font-family: PingFangSC, PingFang SC;
									font-weight: 600;
									font-size: 30rpx;
									color: #333333;
									line-height: 42rpx;
								}

								.safe_content_line {
									width: 3rpx;
									height: 19rpx;
									background-color: #333333;
									margin: 0 8rpx;
								}

								.safe_content_sub_title {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									color: #333333;
									line-height: 28rpx;
									margin-right: 12rpx
								}
							}

							.safe_content_bottom_box {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
								line-height: 30rpx;

								.safe_content_price {
									color: #FE1B02;
								}
							}
						}


					}
				}
			}

			.sku_panel_btn {
				box-sizing: border-box;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 24rpx 24rpx 32rpx;
				background-color: #fff;

				.rule_box {
					box-sizing: border-box;
					margin-bottom: 20rpx;
					font-size: 26rpx;

					.rule_link {
						color: #FF6600;
					}
				}

				.btn_box {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					width: 100%;
					font-size: 30rpx;
					padding: 20rpx 30rpx 0;
					border-top: 2rpx solid #eee;

					.money_text {
						color: #FF6E13;
					}

					.submit_btn {
						width: 100%;
						height: 80rpx;
						background: #FF6E13;
						opacity: 1;
						font-size: 30rpx;
						font-weight: bold;
						color: #fff;
						line-height: 80rpx;
						text-align: center;
						border-radius: 44rpx;
						letter-spacing: 1px;
						padding: 0 100rpx;
					}

					.bubble_tips {
						position: absolute;
						top: -15rpx;
						right: 30rpx;
						font-size: 20rpx;
						background-color: red;
						color: #fff;
						border-radius: 25rpx;
						padding: 10rpx 20rpx;
					}

					.bubble_tips::after {
						content: "";
						position: absolute;
						width: 0;
						height: 0;
						left: 40rpx;
						bottom: -10rpx;
						border-left: 20rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-top: 20rpx solid red;
					}
				}
			}
		}

		.payment_detail_content {
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #f6f6f6;

			.payment_detail_title_box {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 32rpx;
			}

			.amount_total_card {
				.amount_total_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;
					margin-bottom: 20rpx;
				}

				.amount_total_item:first-child {
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #e5e5e5;
				}

				.first_detail {
					position: relative;
					font-size: 26rpx;
					background-color: #f9f9f9;
					color: #999;
					border-radius: 10rpx;
					padding: 20rpx;
				}

				.first_detail::after {
					content: "";
					position: absolute;
					width: 0;
					height: 0;
					left: 40rpx;
					top: -10rpx;
					border-left: 30rpx solid transparent;
					border-right: 30rpx solid transparent;
					border-bottom: 30rpx solid #f9f9f9;
				}

				.first_detail_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.first_detail_item:last-child {
					margin-bottom: 0;
				}

			}

			// 租金计划
			.rental_plan_card {
				.rental_plan_table {
					.rental_plan_td {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding-bottom: 20rpx;
						font-size: 26rpx;
						border-bottom: 1rpx solid #e5e5e5;
						margin-bottom: 20rpx;

						.rental_plan_th {
							width: 25%;
							text-align: center;

							.rental_plan_date {
								font-size: 22rpx;
								margin-top: 5rpx;
							}
						}
					}

					.rental_plan_td_end {
						color: rgb(167, 163, 163);
					}

					.rental_plan_td:last-child {
						border-bottom: none;
						margin-bottom: 0;
					}
				}
			}

			// 租后选择
			.post_tenancy_card {
				.lease_option_box {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-bottom: 20rpx;
					font-size: 26rpx;

					.lease_option_item {
						width: 33%;
						text-align: center;
					}

					.lease_option_item_logo_box {
						display: flex;
						justify-content: center;
						width: 100%;
						margin-bottom: 10rpx;
					}

					.lease_option_item_logo {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #e9502b;
					}

					.lease_option_item_logo .lease_option_item_img {
						width: 40rpx;
						height: 40rpx;
					}

					.lease_option_item_title {
						margin-bottom: 10rpx;
					}

					.lease_option_item_sub_title {
						font-size: 22rpx
					}

					.lease_option_item_tips {
						font-size: 22rpx;
						color: #e9502b;
						margin-top: 5rpx;
					}

				}
			}

			.card_title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				border-bottom: 2rpx solid #e5e5e5;
			}
		}

		.lease_contract_content {
			box-sizing: border-box;
			padding: 32rpx;
			background-color: #fff;

			.lease_contract_title_box {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 32rpx;
			}

			.lease_contract_sub_title_box {
				text-align: center;
				font-size: 24rpx;
				color: #666;
				margin-bottom: 20rpx;
			}

			.scroll_view_H {
				display: flex;
				white-space: nowrap;
				margin-bottom: 24rpx;
			}

			.scroll_view_item_H:first-child {
				margin-left: 20rpx;
			}

			.scroll_view_item_H.active {
				color: #FF6E13;
			}

			.scroll_view_item_H.active .active_line {
				width: 100rpx;
				height: 4rpx;
				background-color: #FF6E13;
				margin: auto;
			}

			.contract_text {
				margin-bottom: 5rpx;
			}

			.scroll_view_item_H {
				text-align: center;
				margin-right: 32rpx;
			}

			.contract_btn_box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.contract_btn {
				text-align: center;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 48rpx;
			}

			.agree {
				background: #FF6E13;
				color: #fff;
			}

		}
	}

	.modal_container {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding-top: 32rpx;

		.close_icon {
			z-index: 999;
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.keFu_content {
			box-sizing: border-box;
			width: 100%;

			.keFu_item {
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				margin-bottom: 48rpx;

				.keFu_item_icon_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 72rpx;
					height: 72rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 36rpx;
					margin-right: 24rpx;

					.keFu_item_icon {
						font-size: 36rpx;
					}
				}

				.keFu_item_title_box {
					flex: 1;
					text-align: left;

					.keFu_item_title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
						line-height: 48rpx;
					}

					.keFu_item_sub_title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.65);
						line-height: 36rpx;
					}
				}

				/deep/contact-button {
					position: absolute;
					opacity: 0.001;
					width: 100%;
				}
			}

			.keFu_item:last-child {
				margin-bottom: 32rpx;
			}

			.keFu_service_box {
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.65);
				line-height: 36rpx;
			}
		}
	}

	button {
		border: none;
		height: 100%;
	}

	/deep/.u-popup__content,
	/deep/.u-modal {
		overflow: visible !important;
	}
</style>